<template>
  <div class="bg">
    <div class="box"></div>
    <van-cell-group>
      <van-cell title="默认就诊人">
        <van-switch v-model="checked" size="24px" active-color="#07c6b4" />
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="num"
        type="digit"
        label="手机号"
        placeholder="请输入手机号"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="idphone"
        type="digit"
        label="身份证号"
        placeholder="请输入身份证号"
      />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="民族" is-link v-model="nationName" @click="NationDialog" />
      <van-popup v-model="nation" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="民族"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="性别" v-model="sexname" is-link @click="dialog()" />
      <van-popup v-model="sexdialog" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="性别"
          show-toolbar
          :columns="sex"
          @confirm="onConfirmsex"
          @cancel="onCancel"
          @change="onChange"

        />
      </van-popup>
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="address"
        label="详细地址"
        placeholder="请输入详细地址"
      />
    </van-cell-group>
    <div class="add" @click="doSubmit()">
      保存
    </div>
  </div>
</template>
<script>
import { Field } from "vant";
import { Cell, CellGroup } from "vant";
import { Switch } from "vant";
import { Picker } from "vant";
import { Popup } from "vant";
import { Toast } from "vant";
export default {
  name: "index",
  data() {
    return {
      sexdialog: false,
      nation: false,
      name: "",
      num: "",
      idphone:"",
      Gender: "",
      address: "",
      nationName:"",
      sexname:"",
      checked: true,
      columnsed:"",
      sex: ["男", "女"],
      columns: [
        "汉族",
        "壮族",
        "满族",
        "回族",
        "苗族",
        "维吾尔族",
        "土家族",
        "彝族",
        "蒙古族",
        "藏族",
        "布依族",
        "侗族",
        "瑶族",
        "朝鲜族",
        "白族",
        "哈尼族",
        "哈萨克族",
        "黎族",
        "傣族",
        "畲族",
        "傈僳族",
        "仡佬族",
        "东乡族",
        "高山族",
        "拉祜族",
        "水族",
        "佤族",
        "纳西族",
        "羌族",
        "土族",
        "仫佬族",
        "锡伯族",
        "柯尔克孜族",
        "达斡尔族",
        "景颇族",
        "毛南族",
        "撒拉族",
        "布朗族",
        "塔吉克族",
        "阿昌族",
        "普米族",
        "鄂温克族",
        "怒族",
        "京族",
        "基诺族",
        "德昂族",
        "保安族",
        "俄罗斯族",
        "裕固族",
        "乌孜别克族",
        "门巴族",
        "鄂伦春族",
        "独龙族",
        "塔塔尔族",
        "赫哲族",
        "珞巴族"
      ]
    };
  },
  components: {},
  created(){
    this.$route.query.idphone;
    console.log(this.$route.query.idphone);
  },
  methods: {
    // baocun
    doSubmit() {
      let obj = {
        idphone:this.idphone,
        name:this.name,
        checked: this.checked,
        Gender: this.Gender,
        phone: this.address,
        sexname: this.sexname,
        columnsed: this.columnsed,
      }
      let strObj = JSON.stringify(obj)
      localStorage.setItem('add',strObj)


      console.log(obj);
      
      


      this.$router.push({
        name: "se_doctor"
      });
    },
    onConfirm(value, index) {
      this.nationName = value;
      this.nation = false;
    },
    onConfirmsex(value,index){
      this.sexname = value;
      this.sexdialog = false;
    },
    onChange(picker, value, index) {
      console.log(value)
      this.columnsed = value;
      
    },
    onCancel() {
      Toast("取消");
      this.show = false;
      this.nation = false;
    },
    // 性别弹框
    dialog() {
      this.sexdialog = true;
    },
    // 民族弹窗
    NationDialog() {
      this.nation = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  height: 44px;
}
.add {
  margin-top: 50px;
  margin-left: 21px;
  width: 332px;
  height: 45px;
  background: #07c6b4;
  border-radius: 5px;
  text-align: center;
  line-height: 45px;

  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
}
</style>